<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>left</title>
		<link rel="stylesheet" href="../css/iframe.css" />
		<script src="../js/jquery-3.5.1.min.js"></script>
		<style>
			* {
				padding: 0;
				margin: 0;
			}
			
			body {
				overflow: hidden;
			}
		</style>
	</head>

	<body class="leftBody">
		<ul class="leftmenu" id="menu">
		</ul>
	</body>
	<script>
		/**
		 * 调整左侧菜单
		 */
		function changeMenuClass(element) {
			//重定选中状态
			$('#menu a.active').removeClass('active');
			element.className += ' active';

			//重定向下箭头
			var dws = $('.downCite');
			if(dws && dws.length > 0) {
				$(dws).addClass('rightCite');
				$(dws).removeClass('downCite');
			}

			//查看父级
			var fatherId = '';
			$('#menu .menuSon').css('display', 'none');
			var parents = $(element).parent();
			while(parents && parents.length > 0 && fatherId != 'menu') {
				var parent = parents[0];
				var tagName = parent.tagName;
				if(tagName === 'UL') {
					$(parent).css('display', 'block');
				}
				//子集上层需要是下箭头
				var prevs = parents.prev();
				if(prevs && prevs.length > 0) {
					var pr = prevs[0];
					var sp = $(pr).children('cite')[0];
					$(sp).removeClass('rightCite');
					$(sp).addClass('downCite')
				}

				//判断循环使用
				fatherId = $(parent).attr('id');
				parents = $(parent).parent();

			}

			//查看子集
			var next = $(element).next();
			if(next && next.length > 0) {
				var nt = next[0];
				var tagName = nt.tagName;
				if(tagName === 'UL') {
					//说明他有子目录-展开
					$(nt).css('display', 'block');
					//把箭头改为向下
					var sp = $(element).children('span')[0];
					$(sp).removeClass('glyphicon-chevron-right');
					$(sp).addClass('glyphicon-chevron-down')
				}
			}
		}
		/**
		 * 展示右侧iframe，并调整左侧菜单
		 */
		function show_context(obj, url) {
			//切换ul样式
			changeMenuClass(obj);
			//显示右侧iframe
			var iframecontext = parent.document.getElementById("rightFrame");
			iframecontext.src = url;
		}

		/**
		 * 递归获取一级菜单全数据
		 */
		function getRow(json, leftPx) {
			var count = json['count'];
			var son = json['son'];
			var row = '';
			if(leftPx==0){
				row += "<a href='javascript:;' onclick='show_context(this,\"" + json['url'] + "\")' class='title'> ";
			}else{
				row += "<a href='javascript:;' onclick='show_context(this,\"" + json['url'] + "\")' > ";
			}
			if(son.length > 0) {
				row += "	<cite style='margin-left:" + leftPx + "px'></cite>" + json['title'] + "";
			}else{
				row += "	<sitting style='margin-left:" + leftPx + "px'></sitting>" + json['title'] + "";
			}
			if(count && count>0) {
				row += "	" + "&nbsp;&nbsp;&nbsp;&nbsp;<span class='circle_index circle_red'>" + count + "</span>";
			}
			
			row += "</a>";
			
			if(son.length > 0) {
				row += "<ul class='list-group menuSon' style='display: none;'>";
				$.each(son, function(i, sonJson) {
					row += getRow(sonJson, leftPx + 15);
				});
				row += "</ul>";
			}
			return row;
		}

		/**
		 *初始化菜单
		 */
		$(function() {
			//加载json数据
			$.getJSON('menu.json', function(data) {
				var mHtml = '';
				$.each(data, function(i, json) {
					mHtml += "<dd>";
					mHtml += getRow(json, 0);
					mHtml += "</dd>";
				});
				$('#menu').append(mHtml);
			});

		});
	</script>

</html>